<template>
  <h1>循环指令练习</h1>
  <ul>
    <!--遍历arr数组,取出的每个值存入uname中,uname就是当前遍历到的元素-->
    <li v-for="uname in arr">{{uname}}</li>
  </ul>
  <ol>
    <!--从1遍历到5,固定写法,默认从1开始,步长为1,结束数字5可以自定义-->
    <li v-for="item in 5">{{item}}</li>
  </ol>
  <table border="1">
    <caption>商品清单</caption>
    <tr>
      <th>商品编号</th>
      <th>商品标题</th>
      <th>商品价格</th>
      <th>商品库存</th>
      <th>操作</th>
    </tr>
    <tr v-for="(p,index) in productArr">
      <td>{{index+1}}</td>
      <td>{{p.title}}</td>
      <td>{{p.price}}</td>
      <td>{{p.num}}</td>
      <td><button @click="del(index)">删除</button></td>
    </tr>
  </table>
</template>

<script setup>
 import {ref} from "vue";

 const arr = ref(["张三","李四","王五","赵六","钱七","周八"]);

 const productArr = ref([
   {title:'小米手机',price:5000,num:8000},
   {title:'华为手机',price:8000,num:10000},
   {title:'苹果手机',price:9000,num:2000},
   {title:'三星手机',price:6000,num:3000},
 ]);

 const del = (index)=>{
   if(confirm('您确认要删除此商品吗?')){
     //splice(从哪个下标开始,删几个)
     productArr.value.splice(index,1);
   }
 }
</script>

<style scoped>

</style>